Skip to content

Use Start deferred hydration APIs#992

Merged
tannerlinsley merged 1 commit into
mainfrom
taren/start-deferred-hydration
Jun 16, 2026
Merged

Use Start deferred hydration APIs#992
tannerlinsley merged 1 commit into
mainfrom
taren/start-deferred-hydration

Conversation

@tannerlinsley

@tannerlinsley tannerlinsley commented Jun 16, 2026 •
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Member

Summary

  • Replace custom delayed mount and hydration wrappers on the homepage with Start's official Hydrate API.
  • Move app starter, landing community, and sponsor deferral to visible/idle hydration strategies.
  • Remove the now-unused custom HomeDeferredSection and shared intersection observer hook.

Validation

  • pnpm test

Summary by CodeRabbit

  • Refactor
    • Updated deferred section loading to use TanStack React Start hydration (Hydrate with visible and idle prefetch) instead of custom intersection observer + React.lazy/Suspense gating.
    • Streamlined home page and route-level deferred rendering by removing the dedicated deferred section component and dynamic lazy wrappers, while preserving existing per-section skeleton fallbacks.
    • Improved application starter hydration behavior with consistent viewport-triggered loading.
  • Chores
    • Added the required TanStack React Start client dependency.

@coderabbitai

coderabbitai Bot commented Jun 16, 2026 •
edited
Loading

Copy link
Copy Markdown

Review Change Stack

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

All deferred/lazy-loading logic previously built on useIntersectionObserver, React.lazy, React.Suspense, and manual idle-callback scheduling is replaced with TanStack React Start's Hydrate, visible, and idle utilities. The useIntersectionObserver hook and HomeDeferredSection component are deleted, and every deferred component and the home route are updated to use Hydrate with when/prefetch props.

Changes

Hydrate-based deferred loading migration

Layer / File(s) Summary
Add TanStack React Start client dependency
package.json		 Adds @tanstack/react-start-client@^1.168.2 to dependencies to enable Hydrate and hydration control utilities.
Migrate deferred components to Hydrate
src/components/DeferredApplicationStarter.tsx, src/components/home/HomeApplicationStarter.tsx, src/components/LazyLandingCommunitySection.tsx, src/components/LazySponsorSection.tsx		 Replaces useIntersectionObserver + React.lazy + Suspense with Hydrate + visible + idle in each component. DeferredApplicationStarter and HomeApplicationStarter now wrap ApplicationStarter directly; LazyLandingCommunitySection hydrates MaintainersSection and PartnersSection together; LazySponsorSection simplifies SponsorPackWithQuery to render SponsorPack directly and wraps with Hydrate. Each uses component-specific rootMargin and idle timeout values.
Migrate home route sections to Hydrate
src/routes/index.tsx		 Adds Hydrate, idle, load, visible imports; removes loadHome*Section dynamic loaders and LazyHome*Section wrappers. Replaces all four HomeDeferredSection wrappers (stats, social proof, community, newsletter) with Hydrate using deferredSectionStage-conditional when expressions that trigger eager load() or fallback to visibility-based hydration, per-section visible rootMargin, idle prefetch timeouts, and named fallback components.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

  • TanStack/tanstack.com#982: The mega-menu implementation in Navbar.tsx relies on the same ts-mega* CSS selectors that are tied to TanStack's Hydrate-driven pre-hydration styling behavior.

Poem

🐇 Hop hop, no more watching walls,
The Hydrate bunny answers calls!
visible whispers "now's the time,"
idle schedules—oh so fine.
Old observers gone to rest,
TanStack Start does it best! 🌟

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main change: replacing custom deferred hydration patterns with TanStack Start's official Hydrate API across multiple components.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch taren/start-deferred-hydration

Comment @coderabbitai help to get the list of available commands and usage tips.

@tannerlinsley tannerlinsley force-pushed the taren/start-deferred-hydration branch from 38862c8 to 0df3960 Compare June 16, 2026 05:19
@tannerlinsley tannerlinsley merged commit d4069c8 into main Jun 16, 2026
8 of 9 checks passed
@tannerlinsley tannerlinsley deleted the taren/start-deferred-hydration branch June 16, 2026 05:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@tannerlinsley